<template>
  <div class="box">
    <div><h2>SkateStore登录界面</h2></div>
    <div class="loginfrom">
      <el-form :label-position="labelPosition" :model="formLabelAlign">
        <el-form-item label="用户名">
          <el-input v-model="formLabelAlign.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            type="password"
            v-model="formLabelAlign.password"
          ></el-input>
        </el-form-item>
        <el-row>
          <router-link to="/register">
            <el-button type="info" class="register"> 注册 </el-button>
          </router-link>
          <el-button type="info" class="land" @click="loginland()">
            登录
          </el-button>
        </el-row>
        <!-- 空白占位 -->
        <div class="placeholder"><span></span></div>
        <div><a href="../index">返回SkateStore首页</a></div>
      </el-form>
      <div class="kongbai"><span></span></div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      labelPosition: "right",
      formLabelAlign: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    loginland() {
      // console.log(this.formLabelAlign);
      //向后端发送请求
      axios
        .post("http://localhost:8081/home/loginLands", this.formLabelAlign)
        .then((res) => {
          if (res.data.code != 200 || res.data.msg != "success") {
            return this.$message.error(res.data.msg);
          }
          this.$message.success("登录成功");
          window.sessionStorage.setItem("userid", res.data.data.id);
          window.sessionStorage.setItem("username", res.data.data.username);
          this.$router.push({ path: "/index" });
        });
    },
    // loginregister() {
    //   //注册
    //   //向后端发送请求
    //   axios.post("http://localhost:8081/home/loginRegister").then((res) => {
    //     console.log(res);
    //   });
    // },
  },
};
</script>
<style>
.box {
  margin-top: 60px;
  height: 600px;
}
.loginfrom {
  margin: 0 auto;
  width: 300px;
}
.placeholder {
  height: 100px;
}
.land {
  size: medium;
}
button.el-button.register.el-button--info {
  margin-top: 60px;
  width: 140px;
}
button.el-button.land.el-button--info {
  width: 140px;
  margin-left: 20px;
}
</style>


